<style>
	.wrapper{
		padding: 10px;
	}
	.contianner{
		width: 70%;
		margin: 0 auto 20px auto;
		overflow: hidden;
	}
	.contianner-inline{
		float:left;
	}
	.txt-label{
		text-align: right;
		font-weight: bold;
	}
	#type_create{
		list-style-type: none;
		margin-left: 25px;
	}
	input{
		margin-left: 10px; 
	}
	input[type="radio"]{
		margin: 0 10px 0 0;
	}
	#div_for_batch_user, #div_for_one_user{
		margin-top: 15px;
	}
</style>
<div class="wrapper">
	<form name="form_new_card" class="form-horizontal" role="form">
		<table class="contianner">
			<colgroup>
				<col style="width: 15%;"/>
				<col style="width: 85%;"/>
			</colgroup>
			<tr >
				<td colspan="2">
					<span class="txt-label">Card Name: </span>
					<input type="text" class="form-control" name="card_name" placeholder="Card Name">
				</td>
			</tr>
			<tr>
				<td colspan="2" class="txt-label" style="text-align: left;">Card Detail: </td>
			</tr>
			<tr>
				<td colspan="2">
					<textarea id="card_detail" name="card_detail">
						This is my textarea to be replaced with CKEditor.
					</textarea>
				</td>
			</tr>
		</table>
		
		<div class="contianner">
			<fieldset>
				<legend>Create User:</legend>
				<!-- create type -->
				<div class="contianner-inline" style="width: 30%;">
					<ul id="type_create">
						<li><input type="radio" name="type_create" value="batch" checked onchange="type_create_change(this.value);">Batch create usersc</li>
						<li><input type="radio" name="type_create" value="one" onchange="type_create_change(this.value);">One user</li>
					</ul>
				</div>
				<!-- input field -->
				<div class="contianner-inline" style="width: 50%;">
					<table>
						<colgroup>
							<col style="width: 40%;"/>
							<col style="width: 60%;"/>
						</colgroup>
						<!-- for batch user -->
						<tr class="div_for_batch_user">
							<td class="txt-label">Number of user: </td>
							<td>
								<input type="text" class="form-control" name="number_of_user" placeholder="Number of user">
							</td>
						</tr>
						<tr class="div_for_batch_user">
							<td class="txt-label">Username prefix: </td>
							<td>
								<input type="text" class="form-control" name="username_prefix" placeholder="Username prefix">
							</td>
						</tr>
						<tr class="div_for_batch_user">
							<td class="txt-label">Username length: </td>
							<td>
								<input type="text" class="form-control" name="username_length" placeholder="Username length">
							</td>
						</tr>
						<tr class="div_for_batch_user">
							<td class="txt-label">Password length: </td>
							<td>
								<input type="text" class="form-control" name="password_length" placeholder="Password length">
							</td>
						</tr>
						<!-- for one user -->
						<tr class="div_for_one_user">
							<td class="txt-label">Username: </td>
							<td>
								<input type="text" class="form-control" name="username" placeholder="Username">
							</td>
						</tr>
						<tr class="div_for_one_user">
							<td class="txt-label">Password: </td>
							<td>
								<input type="text" class="form-control" name="password" placeholder="Password">
							</td>
						</tr>
					</table>
					<!-- limitation -->
					<fieldset>
						<legend>Limitation</legend>
						<table>
							<col style="width: 40%;"/>
							<col style="width: 60%;"/>
							<tr class="limitation">
								<td class="txt-label">Byte In: </td>
								<td>
									<input type="text" class="form-control" name="bye_in" placeholder="Byte In">
								</td>
							</tr>
							<tr class="limitation">
								<td class="txt-label">Byte Out: </td>
								<td>
									<input type="text" class="form-control" name="bye_out" placeholder="Byte Out">
								</td>
							</tr>
							<tr class="limitation">
								<td class="txt-label">Byte Total: </td>
								<td>
									<input type="text" class="form-control" name="bye_total" placeholder="Byte Total">
								</td>
							</tr>
							<tr class="limitation">
								<td class="txt-label">Uptime: </td>
								<td>
									<input type="text" class="form-control" name="uptime" placeholder="Uptime">
								</td>
							</tr>
						</table>
					</fieldset>
				</div>
			</fieldset>
		</div>
		<div class="contianner" style="text-align: center;">
			<button type="button" class="btn btn-default">Create Card</button>
			<button type="button" class="btn btn-default" onclick="go_index()">Close</button>
		</div>
	</form>
	<script type="text/javascript">
		CKEDITOR.replace('card_detail', {filebrowserImageUploadUrl : getURL('/activity/uploadImages')});
	
		jQuery(function(){
			type_create_change('batch');
		});
	
		function go_index(){
			var url = "<?php echo Yii::app()->baseUrl.'/index.php/card/'; ?>";
	
			window.location = url;
		}
	
		function type_create_change(value){
			if( value==='batch' ){
				jQuery('.div_for_batch_user').show();
				jQuery('.div_for_one_user').hide();
			}else if( value==='one' ){
				jQuery('.div_for_batch_user').hide();
				jQuery('.div_for_one_user').show();
			}
		}
		
	
	</script>
</div>
